import React from 'react';
import axios from 'axios';

export default class FetchUser extends React.Component {
    // static defaultProps = {
    //     id: 9527,
    //     user: {}
    // }

    state = {
        // id: 9527,
        user: {}
    };

    getUser = () => {
        const { id, onGetUser } = this.props;
        // if (!id) {
        //     return;
        // }

        // const { id } = this.props;
        // axios 方式获取用户的信息
        axios.get(`https://xiaozhu.run/api/user/${id}`).then((res) => {

            console.log(id);
            
            const user = res.data.data;
            onGetUser && onGetUser(user);
            
        //   console.log(res.data.data);
          this.setState({
            user: res.data.data,
          });
        });
    }

    // 页面DOM元素渲染完成即会执行此方法【挂载】
    componentDidMount() {
        // 第二次执行
        // console.log("第二次执行：componentDidMount()");
        this.getUser();
        /*
        setInterval(() => {
            this.forceUpdate();
        }, 1000);
        */
        
        /*
        fetch("https://xiaozhu.run/api/user/9527").then((resp) => {
            console.log(
                resp.json().then(data => {
                    console.log(data);
                })
            );
        });
        */
    };

    componentUpdate(prevProps) {
        // 第三次执行
        // console.log("第三次执行：shouldComponentUpdate()");
        
        console.log(prevProps); // 0
        if (prevProps.id !== this.props.id) {
            this.getUser();
        }
    }

    render() {
        // 第一次执行
        // console.log("第一次执行：render()");
        const { user } = this.state;
        // const { user } = this.props;
        return (
          <div>
            <p>Id：{user.id}</p>
            <p>Username：{user.username}</p>
            <p>Email：{user.email}</p>
          </div>
        );
    }
}